<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <div class="container">
            <div class="control">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box">内容1</div>
                  <div class="box">内容2</div>
                  <div class="box">内容3</div>
            </div>
      </div>

      <script>
            //创建构造函数Table，形参为要获取的按钮和选择内容
            function Table(btn_selector, content_selector) {
                  //此处this指向new Table函数的实例对象tab1
                  this.btns = document.querySelectorAll(btn_selector);
                  this.contents = document.querySelectorAll(content_selector);
                  //将实例对象tab1索引初始化值为0
                  this.index = 0;
                  //实例对象tab1调用原型对象中的普通函数bindEvent
                  this.bindEvent();
                  //实例对象tab1调用原型对象中的普通函数changeTable
                  this.changeTable();
            }

            Table.prototype.bindEvent = function () {
                  //实例对象tab1调用了原型对象中的普通函数bindEvent,所以此处的this指向为tab1,将此处tab1的this赋值给self变量
                  var self = this;
                  //循环遍历,实例对象中的btns这个DOM元素的长度
                  for (var i = 0; i < self.btns.length; i++) {
                        //将变量i赋值给实例对象中每一个DOM元素btns的索引值
                        self.btns[i].index = i;
                        //给实例对象tab1中的每一个DOM元素btns绑定点击事件
                        self.btns[i].onclick = function () {
                              //将当前触发点击事件的btns索引赋值给实例对象tab1
                              self.index = this.index;
                              //实例对象调用原型对象的普通函数changeTable
                              self.changeTable();
                        }
                  }
            }

            Table.prototype.changeTable = function () {
                  //实例对象tab1调用了原型对象中的普通函数bindEvent,所以此处的this指向为tab1,将此处tab1的this赋值给self变量
                  var self = this;
                  //循环遍历实例对象中的dom元素contents长度
                  for (var i = 0; i < self.contents.length; i++) {
                        //将实例对象tab1中的每一个dom元素contents添加样式：display:none，隐藏起来
                        self.contents[i].style.display = "none";
                  }
                  //实例对象中的dom元素[实例对象的索引值]对应元素的display样式改变为block显示
                  self.contents[self.index].style.display = "block";
            }
            //创建一个tab1实例对象,new Table函数并添加实参".control button", ".box"
            var tab1 = new Table(".control button", ".box");
      </script>
</body>

</html>